<template>
    <view class="return-order-item">
        <view class="header">
            <view class="headerleft">
                <view class="css-status">{{ getStatusText() }}</view>
                <text class="css-date">{{ data.ModifyTime }}</text>
            </view>
            <view class="css-price">￥{{ data.InvoicePrice }}</view>
        </view>
        <view class="css-grey1" />
        <view class="css-name"
            >抬头名称:
            <text class="css-lname">{{ data.Name }}</text>
        </view>
        <view class="order-time">
            <view class="发票">增值税电子发票</view>
            <view class="flex" @click="goOrderDetail">
                <text>发票详情</text>
                <uni-icons type="arrowright" color="#999999" class="css-ricon"></uni-icons>
            </view>
        </view>
        <!--  <view class="css-btnbar" v-if="data.InvoiceState != 1">           
           <view class="css-rbtn"></view>
            <button type="default" size="mini" @click="cancle">撤销申请</button>
            <button type="primary" size="mini" class="css-editbtn" v-if="data.InvoiceState == 0" @click="edit">修改信息</button>
            <button type="primary" size="mini" class="css-editbtn" v-if="data.InvoiceState == 2" @click="edit">重新申请</button>
        </view> -->
        <view class="order-item-bottom" v-if="data.InvoiceState != 1">
            <view class="order-state-menu">
                <text class="btn btn-gray" @click="cancle">撤销申请</text>
                <text class="btn btn-success" v-if="data.InvoiceState == 0" @click="edit">修改信息</text>
                <text class="btn btn-success" v-if="data.InvoiceState == 2" @click="edit">重新申请</text>
            </view>
        </view>
        <uni-popup ref="pick" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                content="确定撤销申请?"
                :before-close="true"
                @close="close"
                @confirm="doCancle"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import { CancleOrderInvoice } from "@/service/api/order.js"
export default {
    props: ["data"],
    data() {
        return {}
    },
    methods: {
        getStatusText() {
            //  InvoiceState 状态:0待审核，1审核通过，2已驳回
            //获取状态文字
            let text = ""
            switch (this.data.InvoiceState) {
                case 0:
                    text = "开票中"
                    break
                case 1:
                    text = "已开票"
                    break
                case 2:
                    text = "已驳回"
                    break
                default:
                    text = "已开票"
                    break
            }
            return text
        },
        goOrderDetail() {
            this.easyGoTo("/pages_me/packet/billing/billDetail?id=" + this.data.ID)
        },
        cancle() {
            this.$refs.pick.open()
        },
        //取消
        close() {
            this.$refs.pick.close()
        },
        //确认撤销申请
        doCancle() {
            this.close()
            let param = {
                id: parseInt(this.data.ID),
            }
            CancleOrderInvoice(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("删除成功")
                    setTimeout(() => {
                        this.easyReLaunch("/pages_me/packet/billing/index")
                    }, 500)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        edit() {
            this.easyReLaunch("/pages_me/packet/billing/creatBilling?id=" + this.data.ID)
        },
    },
}
</script>

<style lang="scss">
@import "style/orderItem.scss";

.return-order-item {
    display: flex;
    flex-direction: column;
    padding: 15rpx $app-page-padding 0;
    background: $color-white;
    border-radius: 16rpx;
    margin: $app-page-padding;
}

.header {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-top: 15rpx;
    margin-bottom: 20rpx;

    .headerleft {
        display: flex;
        justify-content: flex-start;
    }
    .status {
    }
    .characteristic {
        border: 1rpx solid $app-color-main;
        height: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: $app-color-main;
        padding: 0 10rpx;
        border-radius: 10rpx;
        font-size: 24rpx;
        margin-left: 60rpx;
        margin-top: 5px;
        transform: skew(20deg);
        text {
            transform: skew(-20deg);
        }
    }
    .has-good {
        position: relative;
        display: flex;
        flex: 1;
        height: 50rpx;
        perspective: 1000;
        .title {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding-left: 10rpx;
            margin-top: 10rpx;

            .icon {
                margin-right: 6rpx;
            }

            .text {
                color: $color-white;
            }
        }

        .bg {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
            width: 170rpx;
            height: 48rpx;
            /* 宽高 */
            background-color: $app-color-main;
            /* 颜色 */
            padding: 4rpx 10rpx;
            border-radius: 10rpx;
            /* 设置圆角 */
            transform: perspective(16rpx) rotateX(2deg);
            /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
            transform-origin: bottom left;
            /* bottom left = left bottom = 0 100% 中心点偏移量*/
        }
    }

    .hasNot {
        .bg {
            background-color: $color-yellow-1;
        }
    }
}
.order-info {
    background: $color-gray-5;
    padding: $app-page-padding;
    .order-number {
        margin-bottom: 35rpx;
        text {
            color: $color-black;
            font-size: $font-size-30;
        }
    }
    .order-info-other {
        display: flex;
        flex-direction: row;
        .other-item {
            display: flex;
            flex: 1;
            align-items: center;
            text {
                margin-left: 6rpx;
            }
        }
    }
}
.order-time {
    display: flex;
    justify-content: space-between;
    margin: 15rpx 0;
    color: #999999;
    font-size: 24rpx;
    text {
        color: #999999;
    }
}
.css-status {
    background-color: #fdb52a;
    border-radius: 6rpx;
    color: white;
    height: 50rpx;
    line-height: 50rpx;
    padding: 0 15rpx;
    font-size: 26rpx;
    margin-right: 15rpx;
}
.css-date {
    color: #333333;
    font-size: 28rpx;
    line-height: 50rpx;
    font-weight: Medium;
}
.css-price {
    color: #333333;
    font-weight: bold;
    font-size: 32rpx;
}
.css-grey1 {
    background-color: #ebebeb;
    height: 1rpx;
}
.css-name {
    font-size: 28rpx;
    margin: 20rpx 0;
    color: #333333;
}

.css-ricon {
    margin-left: 5rpx;
}
.css-btnbar {
    display: flex;
    margin: 20rpx 0;
}
.css-rbtn {
    display: flex;
    flex: 1;
}
.css-editbtn {
    margin-left: 20rpx;
    color: $color-white;
    background: $app-color-main;
    border: solid 1rpx $app-color-main;
}
.css-lname {
    margin-left: 20rpx;
}
.order-state-menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-bottom: 12px;

    .btn {
        margin-left: $app-page-padding;
    }
}
</style>
